<template>
	<div class="main">
		<el-row>
			<el-col :span="24" class="mainHeader">
				<el-col :span="3" :class="folded?'folded':'mainHeader-left'">
					<div :class="folded?'mainHeader-slogo':'mainHeader-logo'"></div>
				</el-col>
				<el-col :span="1" class="mainHeader-middle">
					<div class="tool" @click.prevent="fold">
						<i class="fa fa-bars"></i>
					</div>
				</el-col>
				<el-col :span="20" class="mainHeader-right">
					<el-dropdown>
						<span class="el-dropdown-link">
    						{{userName}}<img class="mainHeader-userAvatar" :src="this.userAvatar"/>
  						</span>
						<el-dropdown-menu slot="dropdown" style="width: 280px;">
							<el-dropdown-item style="text-align: center;border-bottom: 1px dashed #d4d4d4;">
								<div @click="dialogFormVisible = true" class="mainHeader-avatar">
									<img :src="this.userAvatar" title="点击可修改头像" style="width: 100px;height: 100px;border: 2px solid #00c0ef;border-radius: 50px;margin: 10px 0;" />
								</div>
								<p>{{userName}}</p>
								职位：<span>{{posInfo}}</span>
							</el-dropdown-item>
							<el-dropdown-item style="text-align: center;border-bottom: 1px dashed #d4d4d4;padding: 5px 0;">
								手机: <span>{{telephone}}</span>
							</el-dropdown-item>
							<el-dropdown-item style="text-align: center;padding: 10px 0;">
								<el-button type="warning" @click="dialogpwdFormVisible=true">
									修改密码
								</el-button>
								<el-button type="danger" @click="logout">
									注销
								</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<el-dialog title="修改头像" :visible.sync="dialogFormVisible" size="tiny" style="text-align: left;">
						<div class="mainHeader-modifyAvatarCenter">
							<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar" title="点击图片可修改头像">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</div>
						<div class="mainHeader-modifyAvatarFooter">
							<!-- 确定按钮需要添加-->
							<el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
							<el-button @click="dialogFormVisible = false">取消</el-button>
						</div>
					</el-dialog>

					<el-dialog title="修改密码" :visible.sync="dialogpwdFormVisible" size="tiny" style="text-align: left;" @close="cancelModifyPass">
						<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
							<el-form-item label="密码" prop="pass" auto-complete="off">
								<!--<el-input type="text" v-model="ruleForm2.pass" auto-complete="off" class="inputType" @input="changeInputType"></el-input>-->
								<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
							</el-form-item>
							<el-form-item label="确认密码" prop="checkPass">
								<el-input type="password" v-model="ruleForm2.checkPass" class="inputType"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
								<el-button @click="cancelModifyPass">取消</el-button>
							</el-form-item>
						</el-form>
					</el-dialog>

				</el-col>
			</el-col>
		</el-row>

		<el-row class="mainContent">
			<el-col :span="24">
				<!--左侧菜单栏未折叠-->
				<el-col :span="folded?1:3" class="mainSide-left">
					<el-menu default-active="1" class="el-menu-vertical-demo mainSide-left-content">
						<router-link to="/userList">
							<el-menu-item index="1"><img src="../assets/usermanage-32.png" title="用户管理" /><span v-show="!folded">用户管理</span></el-menu-item>
						</router-link>
						<router-link to="/Institution">
							<el-menu-item index="2"><img src="../assets/hospital-32.png" title="医疗机构" /><span v-show="!folded">医疗机构</span></el-menu-item>
						</router-link>
						<router-link to="/Filedownload">
							<el-menu-item index="3"><img src="../assets/filedownload-32.png" title="文件下载" /><span v-show="!folded">文件下载</span></el-menu-item>
						</router-link>
						<router-link to="/roles">
							<el-menu-item index="4"><img src="../assets/roles-32.png" title="角色管理" /><span v-show="!folded">角色管理</span></el-menu-item>
						</router-link>
						<router-link to="/permission">
							<el-menu-item index="5"><img src="../assets/permission-32.png" title="权限管理" /><span v-show="!folded">权限管理</span></el-menu-item>
						</router-link>
						<router-link to="/application">
							<el-menu-item index="6"><img src="../assets/application-32.png" title="申请管理" /><span v-show="!folded">申请管理</span></el-menu-item>
						</router-link>
					</el-menu>
				</el-col>
				<el-col :span="folded?23:21" class="mainContent-right">
					<router-view></router-view>
				</el-col>
			</el-col>
		</el-row>

		<!-- 底部版本信息 -->
		<el-row class="version">
			<el-col :span="24" class="mainFooter">
				<el-col :span="folded?1:3" class="mainFooter-left">
				</el-col>
				<el-col :span="folded?23:21" class="mainFooter-right">
					<b>Copyright © 2016-2020 <b class="mainFooter-left-text">JF Healthcare</b>.</b> All rights reserved.
				</el-col>

			</el-col>
		</el-row>

	</div>
</template>

<script>
	import { getCurrentUserInfo, logOut } from '../api/api';
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入密码'));
				} else {
					if(this.ruleForm2.checkPass !== '') {
						this.$refs.ruleForm2.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请再次输入密码'));
				} else if(value !== this.ruleForm2.pass) {
					callback(new Error('两次输入密码不一致'));
				} else {
					callback();
				}
			};

			return {
				folded: false,
				dialogFormVisible: false,
				dialogpwdFormVisible: false,
				isCollapse: false,
				userName: '',
				userAvatar: '', //用户头像,
				posInfo: '',
				telephone: '',
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				imageUrl: '',
				ruleForm2: {
					pass: '',
					checkPass: '',
					age: ''
				},
				rules2: {
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath, isCollapse);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			fold: function() {
				// 折叠导航栏
				this.folded = !this.folded;
			},
			hasCollapse: function() { //折叠取反
				this.isCollapse = !this.isCollapse;
			},
			handleAvatarSuccess(res, file) {
				// 修改头像url
				this.imageUrl = URL.createObjectURL(file.raw);
				console.log(this.imageUrl);
				this.userAvatar = this.imageUrl;
			},
			beforeAvatarUpload(file) {
				// <2M
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if(!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				// imageSize
				if(!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			hasCollapse: function() {
				this.$message.error('只能上传1张图片');
				return false;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => { // modify password
					if(valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			logout: function() { // logout
				var _this = this;
				this.$confirm("确定退出吗?", "提示", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					logOut().then(() => {
						sessionStorage.removeItem("userInfo");
						_this.$router.push('/');
					});
				}).catch(() => {

				});
			},
			cancelModifyPass: function() {
				this.resetForm('ruleForm2');
				this.dialogpwdFormVisible = false;
				//			,changeInputType:function(){
				//				var inpType=document.querySelector(".inputType").children[0];
				//				inpType.type="password";
				//			}
			}
		},
		mounted() {
			var userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
			if(userInfo) {
				this.userName = userInfo.accountName || 'Admin';
				this.userAvatar = userInfo.avatar || '/static/user.png';
				this.posInfo = userInfo.position;
				this.telephone = userInfo.telephone;
			}
		}
	}
</script>
<style lang="scss" scoped>
	$background:#929292;
	$bgTiltle:#d4d4d4;
	.main {
		position: relative;
		.mainHeader {
			height: 50px;
			background: $bgTiltle;
			.mainHeader-logo {
				width: 127px;
				height: 37px;
				margin-left: 20px;
				margin-top: 7px;
				background: url('../assets/logo.png');
			}
			.mainHeader-slogo {
				margin: 7px 20px 0 20px;
				width: 35px;
				height: 37px;
				background: url('../assets/slogo.png');
			}
			.mainHeader-left {
				margin-left: -0.5px;
				height: 50px;
				background: $background;
			}
			.folded {
				height: 50px;
				width: 80px;
				margin-left: -2px;
				background: $bgTiltle;
			}
			.mainHeader-middle {
				.tool {
					height: 50px;
					padding-left: 10px;
					line-height: 50px;
					font-size: 24px;
					color: #444;
					cursor: pointer;
					text-align: left;
				}
			}
			.mainHeader-right {
				text-align: right;
				padding-right: 30px;
				float: right;
				height: 50px;
				.el-dropdown-link {
					line-height: 50px;
					font-size: 14px;
					color: #444;
					cursor: pointer;
				}
				.mainHeader-userAvatar {
					line-height: 50px;
					cursor: pointer;
					width: 40px;
					height: 40px;
					border-radius: 20px;
					margin: 5px 0 5px 5px;
					float: right;
				}
				.avatar-uploader .el-upload {
					border: 1px dashed #d9d9d9;
					border-radius: 6px;
					cursor: pointer;
					position: relative;
					overflow: hidden;
				}
				.avatar-uploader .el-upload:hover {
					border-color: #20a0ff;
				}
				.avatar-uploader-icon {
					font-size: 28px;
					color: #8c939d;
					width: 178px;
					height: 178px;
					line-height: 178px;
					text-align: center;
				}
				.avatar {
					width: 178px;
					height: 178px;
					display: block;
				}
				.mainHeader-modifyAvatarCenter {
					width: 95%;
					margin-left: 2.4%;
					padding: 10px 0;
					text-align: center;
					border-radius: 6px;
					border: 2px dashed #ccc;
				}
				.mainHeader-modifyAvatarFooter {
					margin-top: 20px;
				}
			}
		}
		.mainContent {
			.mainSide-left {
				min-height: 850px;
				border-right: solid 1px #eaeaea;
				background-color: #113460;
				text-align: left;
				font-size: 14px;
				.mainSide-left-content {
					background-color: #113460;
				}
				.el-menu-item {
					color: #adc9f4;
					img {
						margin: 16px 10px 0 0;
						float: left;
						width: 24px;
					}
				}
				.el-menu-item:hover {
					background: transparent;
					color: #fff;
					background: #074ca1;
				}
				.is-active {
					color: #ecf0f5;
					background-color: #0a225e;
					border-left: 4px solid $bgTiltle;
				}
			}
			.mainContent-right {
				height: 691px;
				background: #fff;
			}
		}
		.mainFooter {
			right: 0;
			position: absolute;
			bottom: 0px;
			text-align: center;
			color: #444;
			.mainFooter-left {
				height: 45px;
			}
			.mainFooter-right {
				line-height: 45px;
				border-top: solid 1px #ccc;
			}
			.mainFooter-left-text {
				color: #337ab7;
			}
		}
		.mainFooter-right {
			float: right;
		}
	}
</style>